<template>
    <!-- 首页 -->
    <div class="home-wrapper">
        <!-- 顶部按钮 -->
        <div class="top">
            <AButton class="active">
                Mechanical
                Characteristic Test
            </AButton>
            <AButton>Voltage Drop Test</AButton>
            <AButton>Anti-pumping Test</AButton>
            <!-- 占位 -->
            <div class="empty"></div>
            <!-- 电源按钮 -->
            <AButton class="power">Main Power</AButton>
        </div>
        <!-- 下面两部分配置 -->
        <section>
            <div class="left">
                <!-- 顶部 -->
                <header>
                    <span>Basic Test Configuration</span>
                    <div class="refresh">Refresh‌</div>
                </header>
                <div class="box">
                    <p>Control Voltage</p>
                    <!-- 按钮 -->
                    <div class="buttons">
                        <AButton :class="{ active: key == controlForm.type }" @click="controlForm.type = key"
                            v-for="key in ['DC', 'AC', 'External Voltage']">{{ key }}</AButton>
                    </div>
                    <!-- 电流 -->
                    <div class="electric">
                        <AInputNumber v-model="controlForm.v1" style="width:180px" :min="1"></AInputNumber>V
                        <AInputNumber v-model="controlForm.v2"></AInputNumber>V
                        <AInputNumber v-model="controlForm.v3"></AInputNumber>Hz
                    </div>
                    <!-- 另外一个电流 -->
                    <p>Motor Voltage</p>
                    <!-- 按钮 -->
                    <div class="buttons">
                        <AButton :class="{ active: key == motorForm.type }" @click="motorForm.type = key"
                            v-for="key in ['DC', 'AC', 'External Voltage']">{{ key }}</AButton>
                    </div>
                    <!-- 电流 -->
                    <div class="electric">
                        <AInputNumber v-model="motorForm.v1" style="width:180px" :min="1"></AInputNumber>V
                        <AInputNumber v-model="motorForm.v2"></AInputNumber>V
                        <AInputNumber v-model="motorForm.v3"></AInputNumber>Hz
                    </div>
                    <!-- Voltage variation -->
                    <p>Voltage variation</p>
                    <div class="buttons">
                        <AButton :class="{ active: key == voltageType }" @click="voltageType = key"
                            v-for="key in ['Rated', 'High', 'Low']">{{ key }}</AButton>
                    </div>
                    <!-- Voltage Standard  -->
                    <p>Voltage Standard </p>
                    <div class="buttons">
                        <AButton :class="{ active: key == voltageStandard }" @click="voltageStandard = key"
                            v-for="key in ['IEC', 'GB', 'ANSI/IEEE']">{{ key }}</AButton>
                    </div>
                </div>
            </div>
            <div class="right">
                <h3>Power On/Off</h3>
                <!-- 电源按钮 -->
                <div class="power-buttons">
                    <AButton @click="controlPowerUp = !controlPowerUp" :class="{ up: controlPowerUp }">Control Power {{
                        controlPowerUp ? 'OFF' : 'ON' }}</AButton>
                    <AButton :class="{ up: motorPowerUp }">Motor Power {{ motorPowerUp ? 'OFF' : 'ON' }}</AButton>
                </div>
                <h3>Test Operation Configuration</h3>
                <div class="box">
                    <div class="type-box">
                        <div>
                            <p>Types of Tested Switches</p>
                            <SDropdown :options="{
                                CB: 'CB',
                                ES: 'ES',
                                DS: 'DS',
                                HSES: 'HSES',
                                'TPS:DS': 'TPS:DS',
                                'TPS:ES': 'TPS:ES'
                            }" v-model:value="type" />
                        </div>
                        <div v-if="type == 'CB'">
                            <p>phase</p>
                            <div class="list">
                                <ACheckbox @click="phase = item" :checked="phase == item"
                                    v-for="item in ['A', 'B', 'C', 'ABC']">
                                    {{ item }}
                                </ACheckbox>
                                <ACheckbox v-model:checked="secondCoil">
                                    2nd Coil
                                </ACheckbox>
                            </div>
                        </div>
                    </div>
                    <p>Operations</p>
                    <div class="buttons">
                        <AButton>C</AButton>
                        <AButton>O</AButton>
                        <AButton>C-t1-O</AButton>
                        <AButton>O-t-C</AButton>
                        <AButton>O-t-C-t1-O</AButton>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import './index.scss';

// 定义组件属性
defineOptions({
    name: 'home',
    path: '/home',
    async: true
});

/**
 * 类型
 */
const type = ref('CB');
/**
 * 控制器表单
 */
const controlForm = ref({});
/**
 * 电机表单
 */
const motorForm = ref({});
/**
 * 电压类型
 */
const voltageType = ref('');
/**
 * 电压标准
 */
const voltageStandard = ref('');
/**
 * 控制电源开关是否打开
 */
const controlPowerUp = ref(false);
/**
 * 电机电源开关是否打开
 */
const motorPowerUp = ref(false);
/**
 * phase
 */
const phase = ref('A');
/**
 * 第二线圈
 */
const secondCoil = ref(false);
</script>